<template>
    <el-container style="height:100vh">
        <el-header style="background-color: black;color: white;">
            <div style="padding-top: 15px;">
                <span style="font-size: 28px;font-family: '华文彩云';">图书管理系统</span>
                <span style="float: right">欢迎 WELCOME</span>
            </div>
        </el-header>
        <el-container>
            <el-aside style="width: 220px;background-color: #f2f2f2;">
                <el-scrollbar>
                    <el-row>
                        <el-col id="photoPanel">
                            <img src="../assets/admin.jpg" style="width: 50%;border-radius: 100%;"/>
                            <div><span id="online">●</span><span> Administrator</span></div>
                            <el-divider/>
                        </el-col>
                    </el-row>
                    <el-menu default-active="/admin/user" :router="true" background-color="#f2f2f2">
                        <el-sub-menu index="1">
                            <template #title>
                                <el-icon><Avatar/></el-icon>
                                用户管理
                            </template>
                            <el-menu-item index="/admin/user">
                                <el-icon><User/></el-icon>
                                用户维护
                            </el-menu-item>
                            <el-menu-item index="/admin/userAnalysis">
                                <el-icon><Histogram/></el-icon>
                                数据统计分析
                            </el-menu-item>
                        </el-sub-menu>

                        <el-sub-menu index="2">
                            <template #title>图书管理</template>
                            <el-menu-item index="/admin/book"><el-icon><Reading /></el-icon>图书展示</el-menu-item>
                            <el-menu-item index="">图书借阅</el-menu-item>
                        </el-sub-menu>

                        <el-sub-menu index="3">
                            <template #title>借阅管理</template>
                            <el-menu-item index="/item1">item1</el-menu-item>
                            <el-menu-item index="/item2">item2</el-menu-item>
                            <el-menu-item index="/item3">item3</el-menu-item>
                        </el-sub-menu>

                        <el-sub-menu index="4">
                            <template #title>系统设置</template>
                            <el-menu-item index="/config">
                                <el-icon><Setting/></el-icon>
                                系统设置
                            </el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </el-scrollbar>
            </el-aside>
            <el-main>
                <!-- 路由显示区 -->
                <router-view></router-view>

            </el-main>
        </el-container>
    </el-container>
</template>
<style scoped>
#photoPanel {
    padding-top: 10px;
    text-align: center;
}

#photoPanel #online {
    font-size: 20px;
    color: #5CB85C;
}
</style>
<script setup></script>
